<!--
 * @Author: flechazo1 1932689495@qq.com
 * @Date: 2025-02-01 16:58:52
 * @LastEditors: flechazo1 1932689495@qq.com
 * @LastEditTime: 2025-04-06 10:53:10
 * @FilePath: \cms\src\views\Login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="w-full h-screen flex justify-center items-center bg-no-repeat bg-center bg-[url(../assets/login_bg.png)] bg-cover">
        <div class="w-[660px] h-[470px]">
            <div class="w-full text-[#1080CC] font-bold text-center text-[32px]">家政服务CRM系统</div>
            <div class="w-full h-[380px] mt-[32px] bg-white/80 rounded-xl overflow-hidden">
                <h2 class="text-[#5EA1F9] text-center text-lg font-medium mt-[50px] mb-[30px]">用户登录</h2>
                <div class="w-[320px] m-auto flex">
                    <div class="w-[70px] text-center ">
                        <p class="text-[#101010] text-sm/8">用户名</p>
                        <p class="text-[#101010] text-sm/8 mt-[20px]">密码</p>
                    </div>
                    <div class="w-[250px]">
                        <el-input v-model="username" style="width: 240px" placeholder="请输入用户名" />
                        <el-input v-model="password" style="width: 240px" placeholder="请输入密码" type="password" show-password class="mt-[20px]"/>
                    </div>
                </div>
                <el-button type="primary" @click="login">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="login">
import instance from '@/api'
import { ElMessage } from 'element-plus';
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/authStore';
const router = useRouter();
const username = ref('')
const password = ref('')
const authStore = useAuthStore()
async function login(){
    const user = {
        username:username.value,
        password:password.value
    }
    const resp = await instance.post('/api/login',user,{
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    })
    if(resp.status === 200){
        const { token,isSuper,canEmployee,canShop,canData } = resp.data
        authStore.setToken(token)
        authStore.isSuper = isSuper ? true : false
        authStore.canEmployee = canEmployee ? true : false
        authStore.canShop = canShop ? true : false
        authStore.canData = canData ? true : false
        router.push('/level')
        ElMessage({
            message: '登录成功',
            type: 'success',
        })
    }else{
        ElMessage.error('登录失败')
    }
}
</script>

<style scoped>
.el-button{
    width: 300px;
    height: 40px;
    display: block;
    margin: 30px auto;
    background-color: #1080CC;
}
.el-button:hover{
    background-color: #1080CCCC;
}
</style>